// 引入变量
@use "var.scss" as *;
.user-info {
    margin-top: $header-height;
    /* 使用相对单位rem */
    padding-top: 6.25rem;
    /* 调整内边距 */
    //background-color: $theme-background-color;
    margin-bottom: 2rem;
    //   &::before {
    //     content: "";
    //     background-color: $theme-color;
    //     position: absolute;
    //     top: 0;
    //     width: 100%;
    //     height: $header-height + 6.25rem;
    //     /* 使用相对单位rem */
    //   }
    /* 添加媒体查询以适应移动端 */
    @media screen and (max-width: 768px) {
        .user-info::before {
            height: $header-height + 6.25rem;
            /* 调整 ::before 伪元素的高度 */
        }
    }
}

.night-mode .user-info {
    background-color: #21252b;
    color: #ffffff;
}

.article-slide {
    float: none;
    /* 取消左浮动 */
    width: 100%;
    /* 宽度占满整个屏幕 */
    .article-img {
        height: 6.25rem;
        /* 调整高度 */
        width: 6.25rem;
        /* 调整宽度 */
        top: 0;
        /* 取消定位调整 */
        left: 0;
        /* 取消定位调整 */
        margin: 1.25rem auto;
        /* 居中显示 */
        border: 0.3125rem solid $color-white;
        /* 使用相对单位rem */
    }
    .article-info {
        color: $color-black;
        width: 100%;
        /* 宽度占满整个屏幕 */
        font-size: 1.25rem;
        /* 使用相对单位rem */
        font-weight: 500;
        margin: 0;
        /* 使用相对单位rem */
        overflow: hidden;
        li {
            width: 100%;
            line-height: 2.5rem;
            /* 使用相对单位rem */
        }
        .article-info-item {
            width: 100%;
            margin-left: 1.8rem;
            overflow: hidden;
        }
        /* 添加媒体查询以适应移动端 */
        @media screen and (max-width: 768px) {
            .article-info {
                font-size: 1.125rem;
                /* 调整字体大小 */
            }
        }
    }
}

.night-mode .article-info-item {
    background-color: #21252b;
    color: #ffffff;
}

/*文章内容*/

.article-content {
    margin-left: 1.875rem;
    /* 适当调整左边距 */
    padding: 1.25rem 2.5rem;
    /* 适当调整内边距 */
}

.article-title {
    font-size: 1.25rem;
    /* 调整字体大小 */
    font-weight: 600;
}

.articles-body {
    margin-top: 1.25rem;
    /* 适当调整上边距 */
}

/* 添加媒体查询以适应移动端 */

@media screen and (max-width: 768px) {
    .article-content {
        margin-left: 0;
        /* 移动端无左边距 */
        padding: 1.25rem;
        /* 调整内边距 */
    }
    .article-title {
        font-size: 1.125rem;
        /* 调整字体大小 */
    }
    .articles-body {
        margin-top: 1rem;
        /* 调整上边距 */
    }
}
